<template>
  <!-- 头部Tab控制-->
  <div class="w-full h-full grid grid-cols-[240px_1fr]">
    <div class="bg-AiChatLeft text-white">
      <LeftHeader />
      <AiSessionList />
    </div>
    <div class="bg-AiChatMain w-full overflow-hidden">
      <WindowTab fontColor="text-white" obj="aiChat"></WindowTab>
      <div class="w-full h-full text-white relative">
        <!-- 默认页面 -->
        <div v-if="!ActiveSessionId" class="w-full pt-[120px]">
          <Welcome />
        </div>
        <!-- 聊天页 -->
        <div v-else>
          <!-- 标题 -->
          <div class="text-center py-2">新的聊天</div>
          <MessageList ref="messageListRef" class="p-2" />
          <!-- 消息列表 -->
        </div>
        <!-- 输入框 -->
        <AiInput
          v-model:Input="Input"
          class="w-full"
          :class="ActiveSessionId ? 'activeInput' : 'welcomeInput'"
          @sendToAi="SendToAi"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { TryAskAi } from "@/api/ai";
import { storeToRefs } from "pinia";
import { useMitt } from "@/hooks/useMitt";
import { UseAI } from "@/store/modules/ai";
import MessageList from "./components/MessageList.vue";
import AiInput from "./components/AiInput.vue";
import LeftHeader from "./components/LeftHeader.vue";
import AiSessionList from "./components/SessonList.vue";
import Welcome from "./components/Welcome.vue";
import WindowTab from "@/components/WindowTab/index.vue";

const ai = UseAI();
let Input = ref("");
let controller = ref<AbortController | null>(null);
const { ActiveSessionId, AiMessageType, AiMessageList } = storeToRefs(ai);

// 取消请求
function AbortAiRequest() {
  if (controller.value) {
    controller.value.abort();
    controller.value = null;
  }
}

// 发送消息给ai
async function SendToAi() {
  if (Input.value === "") return;
  if (!ActiveSessionId.value) await ai.AddNewSession();
  let content = Input.value;
  if (controller.value) AbortAiRequest();
  controller.value = new AbortController();
  AiMessageList.value.push({ content, type: 1 });
  Input.value = "";
  AiMessageType.value = "message";
  useMitt.emit("aiChatScrollBottom");
  const response = await TryAskAi({
    sessionId: ActiveSessionId.value!,
    content,
    signal: controller.value.signal,
  });
  const aiMessageIndex = AiMessageList.value.length;
  AiMessageList.value.push({ content: "", type: 2 });
  const reader = response.body?.getReader();
  const decoder = new TextDecoder("utf-8");
  while (true) {
    const { done, value } = await reader?.read()!;
    if (done) break;
    const chunk = decoder.decode(value, { stream: true });
    AiMessageList.value[aiMessageIndex].content += chunk;
    useMitt.emit("aiChatScrollBottom");
  }
}
</script>

<style lang="scss" scoped>
@mixin Input {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.AiIcon {
  font-size: 160px;
  color: var(--font-placeholde);
}
.welcomeInput {
  width: 70%;
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translate(-50%, -50%);
  @include Input;
}
.activeInput {
  width: 90%;
  @include Input;
}
</style>
